<template>
  <div class="test-item">
    <div class="content">
      <div class="top">
        <div>
          <span class="top-status">
            {{ filterTestStatus(item.isend) }}
          </span>
          <span class="top-time">{{ filterEndTime(item.endtime) }}截止</span>
        </div>
        <VanPopover
          v-model:show="showPopover"
          :offset="[-110, 8]"
          class="more-info-popover"
        >
          <div class="more-info-popover-box">
            <div class="p-b-10">
              <span class="label">作业名称</span>
              <span class="desc">{{ item.operation.name }}</span>
            </div>
            <div class="p-b-10">
              <span class="label">开始时间</span>
              <span class="desc">{{
                filterEndTime(item.operation.startTime)
              }}</span>
            </div>
            <div class="p-b-10">
              <span class="label">截止时间</span>
              <span class="desc">{{
                filterEndTime(item.operation.deadlinetime)
              }}</span>
            </div>
            <div class="p-b-10">
              <span class="label">作业选项</span>
              <span class="desc">{{
                item.operation.checksw
                  ? "详情可查看 可补交"
                  : "截止后可看 不可补交"
              }}</span>
            </div>
            <div v-show="item.operation.message">
              <span class="label">作业留言</span>
              <span class="desc">{{ item.operation.message }}</span>
            </div>
          </div>

          <template #reference>
            <img
              src="@/assets/images/wrongBook/icon-more.png"
              width="18"
              height="4"
              @click.stop="showPopover = !showPopover"
            />
          </template>
        </VanPopover>
      </div>
      <div class="middle">
        <div>
          <span class="middle-title">{{ item.title }}</span>
          <span
            class="middle-type"
            :style="{ background: filterTestTypeColor(item.mission_type) }"
            >{{ filterTestType(item.mission_type) }}</span
          >
        </div>
        <div class="middle-answer-status">
          {{ filterAnswerStatus(item.is_done) }}
        </div>
      </div>
      <div class="bottom">
        <span class="bottom-error-count"> 错{{ item.cuonum }}题 </span>
        <span class="bottom-rate"> {{ item.finish_ratio }}%同学已完成 </span>
      </div>
    </div>
  </div>
</template>
<script setup>
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat.js";
import { defineProps, reactive, toRefs } from "vue";
dayjs.extend(customParseFormat);

import { Popover as VanPopover } from "vant";

const DAYS = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

const testStatusMap = {
  0: {
    desc: "进行中",
    value: 0,
  },
  1: {
    desc: "已结束",
    value: 1,
  },
};
const testTypeMap = {
  0: {
    desc: "作", // 课后作业
    color: "#FA192C",
  },
  1: {
    desc: "练", // 练习
    color: "#0287FD",
  },
  2: {
    desc: "测", // 测试
    color: "#FF9917",
  },
  3: {
    desc: "考", // 考试
    color: "#0CB76C",
  },
};
const answerStatusMap = {
  1: {
    desc: "已完成",
    value: 1,
  },
  2: {
    desc: "未完成",
    value: 2,
  },
};

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});
const state = reactive({
  showPopover: false,
});

const filterEndTime = (time) => {
  if (!dayjs(time, "YYYY-MM-DD HH:mm:ss", true).isValid()) return "-";
  const weekIndex = dayjs(time).day();
  return `${dayjs(time).format("MM月DD日")}（${DAYS[weekIndex]}）${dayjs(
    time
  ).format("HH:mm")}`;
};
const filterTestStatus = (status) => {
  const cur = testStatusMap[status];
  return cur ? cur.desc : "-";
};

const filterTestType = (value) => {
  const cur = testTypeMap[value];
  return cur ? cur.desc : "-";
};
const filterTestTypeColor = (value) => {
  const cur = testTypeMap[value];
  return cur ? cur.color : "";
};

const filterAnswerStatus = (status) => {
  const cur = answerStatusMap[status];
  return cur ? cur.desc : "-";
};

const { showPopover } = toRefs(state);
</script>
<style scoped lang="scss">
.p-b-10 {
  padding-bottom: 10px;
}
.test-item {
  padding: 0 10px;
  .content {
    background: #fff;
    width: 100%;
    border-radius: 15px;
    font-size: 12px;
    .top,
    .middle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 10px 10px;
      border-bottom: 1px solid #e5e5e5;
      &-title {
        font-size: 16px;
        font-weight: 500;
      }
      & > div {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .top {
      &-status {
        background-color: #fff2e2;
        color: #ff9917;
        border-radius: 6px;
        padding: 2px 10px;
        font-weight: 500;
        margin-right: 5px;
      }
      &-time {
        color: #8e8e8e;
      }
    }
    .middle {
      font-weight: 500;
      &-title {
        margin-right: 11px;
      }
      &-type {
        color: #fff;
        border-radius: 6px;
        padding: 2px 4px;
      }
      &-answer-status {
        color: #8e8e8e;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      padding: 5px 10px 10px;
      font-weight: 500;
      &-error-count {
        color: #fa192c;
      }
      &-rate {
        color: #8e8e8e;
      }
    }
  }
}
.more-info-popover {
  font-size: 12px;
  font-weight: 500;
  .van-popover__arrow {
    left: 85% !important;
  }
  &-box {
    padding: 10px;
    width: 240px;
    box-sizing: border-box;
    .label {
      color: #8e8e8e;
      padding-right: 10px;
    }
    .desc {
      color: #333333;
    }
  }
}
</style>
<style lang="scss">
.more-info-popover {
  .van-popover__arrow {
    left: 95% !important;
  }
  .van-popover__content {
    box-shadow: 0 6px 25px #3232331f;
  }
}
</style>
